<template lang="pug">
  .clearfix
    Modal.add-plan-modal(
      v-model="isShowAddPlanModal"
      title="新建计划"
      width="510"
      class-name="vertical-center-modal"
      :closable="false"
    )
      .h500
        Form.ivu-row.form-add-plan(ref="formData" :model="formData" :rules="rules" label-position="top")
          FormItem.form-item.ivu-col.pr-20.mb-15.form-item-has-unit(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              span.item-span-unit(v-if="item.unit") {{item.unit}}
              Input(v-model="formData[item.model]" :placeholder="item.placeholder")
            template(v-if="item.type === 'interval'")
              .ivu-row
                .ivu-col.ivu-col-span-8.relative
                  span.absolute.z-index-1.line-h-34.pl-10 A：
                  span.item-span-unit(v-if="item.unit") {{item.unit}}
                  Input.pl-35(v-model="formData[item.model1]" readonly :placeholder="item.placeholder1")
                .ivu-col.ivu-col-span-8.relative
                  span.absolute.z-index-1.line-h-34.pl-10 B：
                  span.item-span-unit(v-if="item.unit") {{item.unit}}
                  Input.pl-35(v-model="formData[item.model2]" readonly :placeholder="item.placeholder2")
                .ivu-col.ivu-col-span-8.relative
                  span.absolute.z-index-1.line-h-34.pl-10 C：
                  span.item-span-unit(v-if="item.unit") {{item.unit}}
                  Input.pl-35(v-model="formData[item.model3]" readonly :placeholder="item.placeholder3")

        .add-plan-divider.mb-10
          Divider(dashed) 今日工作计划

        Tabs.add-plan-modal-tabs(:animated="false")
          TabPane(:label="item.label" v-for="(item,index) of formPlanItem" :key="index")
            //- Input(type="textarea" :rows="4" v-model="formPlanData[item.model]" :placeholder="item.placeholder")
            .add-plan-editor.editor-135
              quill-editor(
                v-model="formPlanData[item.model]"
                :options="editorOption"
              )

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import { WorkDayPlanApi } from '@/api/WorkDayPlan.api.js'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import '@/assets/styles/dailyManage.less';

const toolbarOptions = [
  [{ 'align': [] }],
  [{ 'color': [] }, { 'background': [] }]
]

export default {
  name: '',

  props: ['today', 'userId'],

  components: {
    quillEditor
  },

  data () {
    return {
      isShowAddPlanModal: false,
      formData: {
        month_BillingTarget: '',
        week_BillingTarget: '',
        businessTargetA: '',
        businessTargetB: '',
        businessTargetC: ''
      },
      formItem: [
        { type: 'input', label: '本月合同目标', placeholder: '请输入本月合同目标', prop: 'month_BillingTarget', model: 'month_BillingTarget', style: 'ivu-col-span-24', unit: '元' },
        { type: 'input', label: '本周合同目标', placeholder: '请输入本周合同目标', prop: 'week_BillingTarget', model: 'week_BillingTarget', style: 'ivu-col-span-24', unit: '元' },
        { type: 'interval', label: '本周商机目标', placeholder1: 'A', prop1: 'businessTargetA', model1: 'businessTargetA', placeholder2: 'B', prop2: 'businessTargetB', model2: 'businessTargetB', placeholder3: 'C', prop3: 'businessTargetC', model3: 'businessTargetC', style: 'ivu-col-span-24', unit: '个' }
      ],
      formPlanData: {
        keyNote_Plan: '',
        morning_Plan: '',
        afternoon_Plan: ''
      },
      formPlanItem: [
        { type: 'textarea', label: '今日重点', placeholder: '请输入今日重点', prop: 'keyNote_Plan', model: 'keyNote_Plan', style: 'ivu-col-span-24' },
        { type: 'textarea', label: '上午工作计划', placeholder: '请输入上午工作计划', prop: 'morning_Plan', model: 'morning_Plan', style: 'ivu-col-span-24' },
        { type: 'textarea', label: '下午工作计划', placeholder: '请输入下午工作计划', prop: 'afternoon_Plan', model: 'afternoon_Plan', style: 'ivu-col-span-24' }
      ],
      rules: {
        // IdCardNo: [
        //   { type: "string", message: '请输入正确的身份证号码', pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ }
        // ]
      },
      arrListDown: {
        tempOps: []
      },
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
      // PSID: 'local'
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowAddPlanModal = false
    },

    show () {
      this.isShowAddPlanModal = true
      this.$refs.formData.resetFields()
      console.log('打开弹窗后的🚪 today: ', this.today, ', userId: ', this.userId)
    },

    // 新建计划 提交表单
    async handleSubmit () {
      console.log('this.formData: ', { ...this.formData, ...this.formPlanData })
      var params = {
        ...{ userId: this.userId, date: this.today },
        ...this.formData,
        ...this.formPlanData
      }
      let res = await WorkDayPlanApi.savePlan(params)
      console.log('新建计划 提交表单res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.isShowAddPlanModal = false
        this.$emit('query')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 根据用户ID+日期获取本天工作计划
    async query (date) {
      var params = {
        userId: this.userId,
        date: date
      }
      let res = await WorkDayPlanApi.getPlan(params)
      console.log('本天工作计划res: ', res)
      if (res.status === 200 && res.data.success) {
        var data = res.data.data

        // 循环日历表顶部的月数据
        Object.keys(this.formData).forEach(key => {
          if (data[key]) {
            this.formData[key] = data[key]
          } else {
            this.formData[key] = '0'
          }
        })

        // 循环工作数据
        Object.keys(this.formPlanData).forEach(key => {
          if (data[key]) {
            this.formPlanData[key] = data[key]
          } else {
            this.formPlanData[key] = '无'
          }
        })
      } else {
      }
    }
  }
}
</script>

<style lang="scss">
// @import '@/assets/styles/dailyManage.less';
</style>
